/*  

MyTabBar extends TabBar 
內含加料過的 MyButton

在 MyButton 裏面它會產生一個 overlay 用的  hit-area sprite，永遠顯示在最上層，
因此可以接收到滑鼠的 mouse_down 事件並廣播 onCloseButton 事件。

MyTabBar 負責的事：

-載入 close button 的 icon, 目前使用 close.png ，但將來應該可讓 user 指定
-顯示/隱藏 close button (closeTab = true|false)

API:

-showCloseButton = b:Boolean

original date: 2006-Mar-28 Jeremy

last modified: 2006-Jul-22 Jeremy

*/
package com.jy.travel.components {
	
//	import com.richtech.utils.Util;
	
	import flash.display.DisplayObject;
	import flash.display.InteractiveObject;
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.containers.ViewStack;
	import mx.controls.Button;
	import mx.controls.TabBar;
	import mx.core.*;
	import mx.events.DragEvent;
	import mx.events.ItemClickEvent;
	import mx.managers.DragManager;
	import mx.skins.halo.TabSkin;
	
	use namespace mx_internal;
	
	
	public class MyTabBar extends TabBar {
		
		
		
		[Embed (source="close.png")]
		private var ic:Class;
		
		public function MyTabBar(){
			super();
			
			//This is the most important part - override parent class so it will use my Button class
			//super.mx_internal::
			navItemFactory = new ClassFactory(MyButton);
			
			
			//listen to each tab's closing event
			this.addEventListener("buttonClose", onButtonClose);
			
		}
		
		/*
		TabBar 內部先偵聽每個 button 的  close event，然後
		
		- 依 _showCloseButton 判斷是否要讓event 繼續bubble出去
		- 將 button 傳來的 itemClickEvent 加如以下三個參數(因為只有在這個階段才能提供這些資訊)
			label
			index
			relatedObject
			
		-加料完的 itemClickEvent 會帶者三個新增的 prop 繼續 bubbling up 到最外層 就成功了
		
		*/
		private var isClosingTab:Boolean;
		
		function onButtonClose(evt:ItemClickEvent){
			
			isClosingTab = true;
			
			//如果是隱藏close button狀態，就不讓事件再 bubble 上去 
			if( !_showCloseButton ){
				evt.stopImmediatePropagation();
			}
			
			//加料三個prop
			evt.label = evt.target.label;
			evt.index = this.getChildIndex( evt.target as DisplayObject );
			evt.relatedObject = evt.target as InteractiveObject;
			
			
			// danielwong
			if (this.dataProvider is ArrayCollection) {
				//內部就負責刪掉點選的 tab
				var arr:ArrayCollection = this.dataProvider as ArrayCollection;
				arr.source.splice( evt.index, 1 );
				this.dataProvider = arr;
	
				//刪掉後預選前一個tab 
				if( evt.index > 0){
					this.selectedIndex = evt.index-1;
				}else if( evt.index == 0){
					//最後一個tab被刪掉了，不能再預選前一個囉(已經沒有tab了)
					return;
				}
			} else if (this.dataProvider is ViewStack) {
				//內部就負責刪掉點選的 tab
				var arr2:ViewStack = this.dataProvider as ViewStack;
				arr2.removeChildAt(evt.index);
				this.dataProvider = arr2;
	
				//刪掉後預選前一個tab 
				if( evt.index > 0){
					this.selectedIndex = evt.index-1;
				}else if( evt.index == 0){
					//最後一個tab被刪掉了，不能再預選前一個囉(已經沒有tab了)
					return;
				}
			}
			

			
		}
		
		//所有目前顯示中的 tab-button 都存一份在這裏 - 方便將來 show/hide close button
		private var icons:Array = [];
		private var btnBorderColor:int;
		
		override protected function createNavItem( label:String, icon:Class = null):IFlexDisplayObject{
			
			//
			var navItem:IFlexDisplayObject = super.createNavItem(label, icon);
			//
			var btn:Button = Button(navItem);
			btn.setStyle("icon", (_showCloseButton)?ic:null );
			btn.labelPlacement = "left";
			icons.push(btn);
			//預存一份button目前的顏色，將來dragExit時要還原
			btnBorderColor=  btn.getStyle("borderColor");
			
			//這段是讓tab 內每個按鈕都使用 mx.skins.halo.tabSkin 裏的預設值
			//畫出來就會跟 flex2 內建一樣 - 這是之前做 MyToggleButtonBar 時使用 skin 的經驗
			btn.setStyle("upSkin", TabSkin);
			btn.setStyle("overSkin", TabSkin);
			btn.setStyle("downSkin", TabSkin);
			btn.setStyle("disabledSkin", TabSkin);
			btn.setStyle("selectedUpSkin", TabSkin);
			btn.setStyle("selectedOverSkin", TabSkin);
			btn.setStyle("selectedDownSkin", TabSkin);
			btn.setStyle("selectedDisabledSkin", TabSkin);
			
			
			//每個 tab 所需的拖拉事件
			btn.addEventListener("mouseMove", onDragMove);
			btn.addEventListener("dragEnter", onDragEnter);
			btn.addEventListener("dragDrop", onDragDrop);
			btn.addEventListener("dragExit", onDragExit);
			btn.addEventListener("dragComplete", onDragComplete);
			
//			btn.addEventListener(MouseEvent.MOUSE_OVER, onDragOver);
//			btn.addEventListener(MouseEvent.MOUSE_OUT, onDragOut);
			
			//		
			return navItem;
		}
		
//		private function onDragOut(evt:MouseEvent){
//			
//			if(!_showCloseButton){return}
//			
//			//因為 mouseChildren 為 true, 所以文字框之類的也會觸發這個事件，要濾掉
//			if( evt.target is Button ){
//	 			var di:Button = Button(evt.target)
//	 			di.setStyle("icon", ic2 );
//	 		} 
// 		}
//		
//		private function onDragOver(evt:MouseEvent){
//			
//			if(!_showCloseButton){return}
//			
//			//因為 mouseChildren 為 true, 所以文字框之類的也會觸發這個事件，要濾掉
//			if( evt.target is Button ){
//	 			var di:Button = Button(evt.target)
//	 			di.setStyle("icon", ic );
//	 		}
// 		}
		
		///////////
		
		private function onDragMove(evt:MouseEvent){
			
			if(!dragEnabled){return}
			
			//因為 mouseChildren 為 true, 所以文字框之類的也會觸發這個事件，要濾掉
			if( evt.target is Button ){
	 			var di:Button = Button(evt.target)
	 			DragManager.doDrag( di, new DragSource(), evt );
	 		}
 		}
 		
 		private function onDragEnter(evt:DragEvent){
 			
 			if(!dragEnabled){return}
 			
 			trace("onDragEnter");
 			DragManager.showFeedback( DragManager.LINK);
 			DragManager.acceptDragDrop( Button(evt.target) )
 			
 			//讓被 dragEnter 的 button 邊框變紅色 表示被 rollOver
 			//Button( evt.target ).setStyle("borderColor", "red");
 			
 			//
 			var b:Button = evt.target as Button;
 			b.graphics.lineStyle(5, 0x6B6B6B, 50);
 			b.graphics.drawRoundRect(0, 0, b.width, b.height, 2, 2);
 		}
 		
 		private function onDragDrop(evt:DragEvent){
 			
 			if(!dragEnabled){return}
 			
 			trace("onDrop");
 			//Button( evt.target ).setStyle("borderColor", "#b7babc");
 			var b:Button = evt.target as Button;
 			b.graphics.clear();
 			/**/
 			//Util.traceType( evt.dragInitiator );
 			//trace("source");
 			//Util.traceType( evt.dragSource );
 			var dragButtonIdx:int = this.getChildIndex( DisplayObject(evt.dragInitiator) );
 			var dropButtonIdx:int = this.getChildIndex( evt.target as DisplayObject );
 			
 			trace(dragButtonIdx, " >> ", dropButtonIdx);
 			
 			// danielwong
 			if (this.dataProvider is ArrayCollection) {
 				var arr:ArrayCollection = this.dataProvider as ArrayCollection;
	 			//return;
	 			
	 			if( dragButtonIdx < dropButtonIdx ){
	 				//前 往 後
	 				arr.addItemAt( arr.getItemAt(dragButtonIdx), dropButtonIdx+1)
	 				arr.removeItemAt( dragButtonIdx );
	 				//trace("前 往 後 done");
	 			}else if ( dragButtonIdx > dropButtonIdx ){
	 				//後 往  前
	 				
	 				arr.addItemAt( arr.getItemAt(dragButtonIdx), dropButtonIdx)
	 				arr.removeItemAt( dragButtonIdx + 1 );
	 			}else if ( dragButtonIdx == dropButtonIdx ){
	 				//同位置
	 				
	 			}
 			} else if (this.dataProvider is ViewStack) {
 				var arr2:ViewStack = this.dataProvider as ViewStack;
	 			//return;
	 			
	 			if( dragButtonIdx < dropButtonIdx ){
	 				//前 往 後
	 				var dobject = arr2.getChildAt(dragButtonIdx);
	 				arr2.removeChildAt( dragButtonIdx );
					arr2.addChildAt(dobject, dropButtonIdx)
//	 				arr2.removeChildAt( dragButtonIdx );
	 				//trace("前 往 後 done");
	 			}else if ( dragButtonIdx > dropButtonIdx ){
	 				//後 往  前
	 				arr2.addChildAt( arr2.getChildAt(dragButtonIdx), dropButtonIdx)
//	 				arr2.removeChildAt( dragButtonIdx + 1 );
	 			}else if ( dragButtonIdx == dropButtonIdx ){
	 				//同位置
	 			}
 			}
 			
 			
 			
 			this.selectedIndex = dropButtonIdx;
 			
 		}
 		
 		private function onDragExit(evt:DragEvent){
 			
 			if(!dragEnabled){return}
 			
 			trace("onDragExit");
 			//Button( evt.target ).setStyle("borderColor", "#b7babc");
 			//
 			var b:Button = evt.target as Button;
 			b.graphics.clear();
 		}
 		
 		private function onDragComplete(evt:DragEvent){
 			
 			if(!dragEnabled){return}
 			
 			trace("complete : handle dp now");
 			//Button( evt.target ).setStyle("borderColor", "#b7babc");
 		}
		
		/*
		drag 判斷條件
		1. 拖主比落點大，放落點後 (前 往 後)
		2、拖主比落點小，放落點前 (後 往 前)
		3、拖主 等於 拖主，不用改
		
		*/
		
		
		//記錄這個  tabBar 的 close button 是否可作用
		private var _showCloseButton:Boolean = true;

		//切換 close button 的 show/hide, 但如果是 hide 只是不顯示，原本icon佔掉的位置不會 reclaim
		public function showCloseButton(b:Boolean){
			trace("b: ", b);
			
			//如果現在已 show 又傳 show 就不用理它
			if(_showCloseButton == b){return};
			
			//
			if(b){
				for(var i:int=0;i<icons.length;i++){
					icons[i].setStyle("icon", ic);
				}
			}else{
				for(var i:int=0;i<icons.length;i++){
					icons[i].setStyle("icon", null);
				}
			}
			//
			 _showCloseButton = b;
		}
		
		//tab是否可拖拉
		private var _dragEnabled:Boolean = false;
		
		public function set dragEnabled(b:Boolean):void{
			_dragEnabled = b;
		}
		public function get dragEnabled():Boolean{
			return _dragEnabled;
		}
		
		
		//// test code ///////////////////////////////
		
		public function test(){
			trace(icons.length);
			for(var k:int=0;k<this.numChildren;k++){
				trace(Button(this.getChildAt(k)).setStyle("icon", null) );
			}
		}
		
		
	}
}
